<template>
  <div class="bodyContainer">
    <div class="headImg">
      <img src="img/bg/head.png">
    </div>
    <div class="content">
      <div class="headStyle">
        {{questionData.questionnaireTitle}}
      </div>
      <div class="noticeStyle">
        <div v-html="questionData.questionnaireNotice"></div>
      </div>
      <div v-for="(item,index) in data" :key="index" class="itemStyle">
        <div v-if="item.subjectProperties == '主题目'" class="titleStyle">
          <span style="color:red; font-weight:bold;"> {{item.isRequired == '1' ?'*':''}}</span>{{item.showSeq}}. {{item.subjectTitle}}【{{item.subjectType}}】
        </div>
        <div v-if="item.subjectProperties == '分割内容'" class="splitStyle">
          <el-divider content-position="left">{{item.subjectAnswer}}</el-divider>
        </div>
        <div style="padding-left:20px;">
          <div v-if="item.subjectType == '文本'"> 
            <el-input
              v-if="item.subjectProperties == '主题目'"
              
              placeholder="请输入内容"
              v-model="item.answerResult"
              
              style="width:800px;"
              clearable>
            </el-input>
          </div>
          <div v-if="item.subjectType == '多行文本'"> 
            <el-input
              v-if="item.subjectProperties == '主题目'"
              
              type="textarea"
              rows="3"
              placeholder="请输入内容"
              v-model="item.answerResult"
              
              style="width:800px;"
              clearable>
            </el-input>
          </div>
          <div v-if="item.subjectType == '数字'"> 
            <el-input
              v-if="item.subjectProperties == '主题目'"
              
              type="number"
              placeholder="请输入内容"
              v-model="item.answerResult"
              
              style="width:800px;"
              clearable>
            </el-input>
          </div>
          <div v-if="item.subjectType == '下拉选择'"> 
            
          </div>
          <div v-if="item.subjectType == '日期'"> 
            <el-date-picker
              v-if="item.subjectProperties == '主题目'"
              
              v-model="item.answerResult"
              type="date"
              
              placeholder="选择日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              style="width:800px;"
              >
            </el-date-picker>
          </div>
          <div v-if="item.subjectType == '单选'">
            <el-radio-group v-if="item.subjectProperties == '主题目'" v-model="answerResult" >
              <el-radio  v-for="(subjectItem,indx) in item.subjectContent" :label="questionSheet?subjectItem.label:subjectItem.value" :key="indx"   style="display:block;width:700px">{{questionSheet?subjectItem.label+'、':''}}{{subjectItem.value}}</el-radio>
            </el-radio-group>
          </div>
          <div v-if="item.subjectType == '多选'"> 
            <el-checkbox-group v-if="item.subjectProperties == '主题目'" v-model="answerResult" >
              <el-checkbox v-for="(subjectItem,indx) in item.subjectContent" :label="subjectItem.value" :key="indx" style="display:block;width:700px;">{{questionSheet?subjectItem.label+'、':''}}{{subjectItem.value}}</el-checkbox>
            </el-checkbox-group>
          </div>
          <div v-if="item.subjectType == '地区'"> 
            <el-cascader
              v-if="item.subjectProperties == '主题目'"
              size="large"
              :options="options"
              style="width:800px;"
              @change="handleChange(item)">
            </el-cascader>
          </div>
          <div v-if="item.subjectType == '文件'"> 
              <el-upload
              class="upload-demo" 
              multiple
              :limit="10"
              drag>
            <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
          </div>
        </div>
      </div>
    </div>
    <div style="text-align:center; padding-bottom:50px;font-size:14px">
       独领科技 <span style="color:#666666"> 提供技术支持</span>
    </div>
  </div>
</template>

<script>
import {exportBizQuestionTemplateExcel,saveOrUpdateBizQuestionTemplate,saveOrUpdateBizQuestionTemplateList,saveBizQuestionTemplate,saveBizQuestionTemplateList,deleteBizQuestionTemplate,queryBizQuestionTemplate,queryBizQuestionTemplateListPage,updateBizQuestionTemplate,deleteBizQuestionTemplateList} from '@/api/biz/question/bizQuestionTemplateApi';
import {saveOrUpdateBizQuestionSubjectConfigList,saveBizQuestionSubjectConfig,saveBizQuestionSubjectConfigList,deleteBizQuestionSubjectConfig,queryBizQuestionSubjectConfig,queryBizQuestionSubjectConfigListPage,updateBizQuestionSubjectConfig,deleteBizQuestionSubjectConfigList} from '@/api/biz/question/bizQuestionSubjectConfigApi';

import {mapGetters} from 'vuex';
import { reqCommonMsg } from '@/util/reqCommonMsg';
import {regionData,CodeToText} from 'element-china-area-data'
import {getToken} from '@/util/auth'
import {Base64} from 'js-base64';
export default {
  props: {
    templateId:{
      type: String
    }
  },
  data() {
    return {
      //上传文件
      headersParam:{},
      dataParam:{},
      fileList: [],
      uploadFlag: '0',

      // 地址选择栏
      options: regionData,
      addtions:{},			//存储地址数据
      // 试卷类型
      answerResult:[],
      questionSheet: false, 
      checkList: [],
      loading: false,
      radio:'',
      data: [],
      questionData:{},
      questionSheetId: 'DOOL1001SLST00000021',
      // 请求参数区
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      reqParams: {
        singleBody: {},
        listBody: [{}],
        sqlCondition:[],
        orderRule: [],
        currentPage: 1,
        pageSize: 10
      },
      commonData: null,
      conditions: [],
      orderRules: [],
      singleBody: {}
    };
  },
  computed: {
    ...mapGetters(['website','orgTree','genOrgTree','userInfo','permission','projectInfo']),
  },
  methods: {

    /**
     * 加载下发列表信息
     */
    loadSendList(){
      this.reqParams =  {
        singleBody: {
          id:this.templateId
        }
      }
      let commonData = reqCommonMsg(this.reqParams)
      queryBizQuestionTemplate(commonData).then(res => {
        this.questionData = res.data.body.singleBody;
        if(this.questionData.questionnaireType == '试卷'){
          this.questionSheet = true;
        }
      }, error => {
        this.$console.log(error);
      });
    },
    /**
     * 处理地区
     */
    handleChange (value) {
      //我们选择地址后，selectedOptions 会保存对应的区域码，例如北京的区域码为'110000'
      //我们要取出区域码对应的汉字，就需要用CodeToText(区域码)进行输出
      this.$console.log('value===',value);
      this.addtions.selectedOptions = value.answerResult.selectedOptions;
      var name = ''
      value.answerResult.selectedOptions.map(item => name += CodeToText[item] + '/')
      this.addtions.names = name
      value.answerResult = this.addtions;

    },
    /**
     * 加载题目列表数据
     */
    onLoad(page) {
      this.reqParams =  {
        singleBody: {
          questionnaireTemplateId: this.templateId
        },
        listBody: [{}],
        sqlCondition: this.conditions,
        orderRule:{
          prop: 'showSeq',
          order: 'ascending' 
        },
        currentPage: 1, 
        pageSize: 99999
      }
      this.commonData = reqCommonMsg(this.reqParams)
      queryBizQuestionSubjectConfigListPage(this.commonData).then(res => {
        const data = res.data.body;
        this.data =data.listBody;
        let index=0;
        this.data.forEach(element => {
          element.subjectContent = JSON.parse(element.subjectContent);
          //处理跳转题目
          let notGotoSubjectIds = [];
          let gotoSubjectId = '';
          //查找需要跳转的ID
          element.subjectContent.forEach(element2 => {
            if(this.questionSheet){ //试卷 比较label
              if(element2.label == element.answerResult){
                gotoSubjectId = element2.gotoSubject;
              }
              else{
                notGotoSubjectIds.push(element2.gotoSubject);
              }
            }
            else{ //问卷比较项值
              if(element2.value == element.answerResult){
                gotoSubjectId = element2.gotoSubject;
              }
              else{
                notGotoSubjectIds.push(element2.gotoSubject);
              }
            }
        
          });
          //需要跳转的
          this.data.forEach(element3 => {
            if(element3.id == gotoSubjectId){
              element3.subjectProperties = '主题目';
            }
          });
          //不需要跳转的
          notGotoSubjectIds.forEach(notElement => {
            this.data.forEach(element3 => {
              if(element3.id == notElement){
                element3.subjectProperties = '跳转题目';
                if(element3.subjectType == '多选' || element3.subjectType == '地区' || element3.subjectType == '文件'){
                  element3.answerResult = [];
                }
                else{
                  element3.answerResult = '';
                }
              }
            });
          });
          if(element.subjectProperties == '主题目'){
            index++;
            element.showSeq = index;
          }
        });
        this.loading = false;
        this.$console.log('this.data ====',this.data );
      }, error => {
        this.loading = false; 
      });
    }, 

    
    /**
     * 调用子组件方法查询历史
     */
    getHistoryRecord () {
      setTimeout(() => {
        this.$refs.historyRecord.getUpdateHistoryRecord(this.form.id);
      })
    },
  },
  created() {
      
    this.showColumn = this.$getStore({name: this.userInfo.userId+'bizQuestionSendListColumn'});
    //初始化文件上传头信息
    this.headersParam={
      'Authorization': 'bearer ' + getToken(),
      'UserId': this.userInfo.userId,
      'UserSign':'uploadFile',
      'remote': 'no'
    }   
    //加载问卷题单信息
    this.loadSendList();
    //加载数据
    this.onLoad(this.page);
  },
  watch: {
    templateId: {
      handler (val) {
        this.singleBody={};
        this.onLoad(this.page);
      },
      deep: true
    }
  }
};
</script>
<style  lang="scss">
  .bodyContainer{
    height: 100%;
    width: 100%;
    overflow: auto;
    margin: 0;
    padding: 0;
    background: #edf2f7 !important;
  }
  .headImg{
    margin: 0 auto;
    width: 900px;
  }
  .content {
    margin: 0 auto;
    width: 900px;
    margin-bottom: 50px;
		padding: 30px;
		background-color: #FFFFFF;
	}
  .headStyle{
    text-align: center;
    font-size: 28px;
    font-weight: bold;
  }
  .noticeStyle{
    font-size: 14px;
    padding-top:20px;
    line-height: 1.8;
  }
  .titleStyle{
    font-size: 16px;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 5px;
    padding:5px 0px 5px 5px;
    // background-color: #eeeeee; 
    background-image: linear-gradient(#eeeeee, #fff);
  }
  .itemStyle{
    margin-bottom: 50px;
  }
  
</style>
